<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" th:href="@{/el/element.css}">
    <script th:src="@{/js/vue.js}" type="text/javascript"></script>
    <!--    <script th:src="@{https://unpkg.com/element-ui/lib/index.js}" type="text/javascript"></script>-->
    <script th:src="@{/el/element.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>
    <script th:src="@{/js/wangEditor.min.js}" type="text/javascript"></script>
<!--    <script th:src="@{/js/wangEditor.min.js}" type="text/javascript"></script>-->
    <title></title>
</head>
<style>
    .el-tabs__item{
        width: 150px;
        text-align: center;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 120px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>

<body>
<div id="app">
    <el-container>
        <el-header>
            <div th:include="~{common/homePage::head}"></div>
        </el-header>

                <el-tabs v-model="activetabs" tab-position="left" style="height: 600px;">
                    <el-tab-pane label="博客管理" name="blog">
                        <el-table :data="myblogs"  max-height="300">
                            <el-table-column property="title" label="标题" width="150"></el-table-column>
                            <el-table-column property="author" label="作者" width="100"></el-table-column>
                            <el-table-column property="readvolume" label="阅读量"></el-table-column>
                            <el-table-column property="review" label="评论数"></el-table-column>
                            <el-table-column  fixed="right"
                                              label="操作">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small" @click="updBlog(scope.row.id)">更新博客</el-button>
                                    <el-button type="text" size="small" @click="delBlog(scope.row)">删除博客</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="评论管理">
                        <el-table
                                :data="mydis"
                                style="width: 100%">
                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <el-form label-position="left" inline class="demo-table-expand">
                                        <el-form-item label="评论ID">
                                            <span>{{ props.row.id }}</span>
                                        </el-form-item>
                                        <el-form-item label="评论内容">
                                            <span>{{ props.row.context }}</span>
                                        </el-form-item>
                                        <el-form-item label="回复时间">
                                            <span>{{ props.row.createTime }}</span>
                                        </el-form-item>
                                        <el-form-item label="回复的文章ID">
                                            <span>{{ props.row.blog.blog.id }}</span>
                                        </el-form-item>
                                        <el-form-item label="文章标题">
                                            <span>{{ props.row.blog.blog.title }}</span>
                                        </el-form-item>
                                    </el-form>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="评论 ID"
                                    prop="id">
                            </el-table-column>
                            <el-table-column
                                    label="文章标题"
                                    prop="blog.blog.title">
                            </el-table-column>
                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="120">
                                <template slot-scope="scope">
                                    <el-button
                                            @click.native.prevent="delDis(scope.row.id)"
                                            type="text"
                                            size="small">
                                        移除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                layout="prev, pager, next"
                                :page-size="num"
                                :total="total"
                                @current-change="getMyDis"
                                :current-page="curPage"
                                background>
                        </el-pagination>
                    </el-tab-pane>
                    <el-tab-pane label="角色管理">
                        <el-collapse v-model="activeName" accordion >
                            <el-collapse-item title="更新密码" name="1">
                                <el-form :model="user">
                                    <el-form-item label="新密码" :label-width="formLabelWidth">
                                        <el-input v-model="user.password" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="操作" :label-width="formLabelWidth">
                                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                                        <el-button type="primary" @click="updPwd()">确 定</el-button>
                                    </el-form-item>
                                </el-form>

                            </el-collapse-item>
                            <el-collapse-item title="用户名修改" name="2">
                                <el-form :model="user">
                                    <el-form-item label="新的名字" :label-width="formLabelWidth">
                                        <el-input v-model="user.name" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="操作" :label-width="formLabelWidth">
                                        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                                        <el-button type="primary" @click="updName()">确 定</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-collapse-item>
                        </el-collapse>
                    </el-tab-pane>

                </el-tabs>
            </el-main>


    </el-container>
</div>
</body>
    <script>
        new Vue({
            el: '#app',
            data: {
                num:10,
                total:0,
                curPage:0,
                activetabs:"name",
                activeName: '1',
                activeIndex: '1',
                activeIndex2: '1',
                formLabelWidth:"90px",
                dialogFormVisible:false,
                dialogFormVisible2:false,
                types:[],
                olduser:{},
                user:{},
                myblogs:[],
                mydis:[],
            },
            methods: {
                handleSelect(key, keyPath) {
                    this.typeid=key;
                },
                go2Back()
                {
                    window.location.href="/login/index"
                },
                setCookie(c_name, value,path, expiredays){
                    var exdate=new Date();
                    exdate.setDate(exdate.getDate() + expiredays);
                    document.cookie=c_name+ "=" + value +";path="+path+";" + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
                },
                findByBlogType(typeid){
                    //此页不处理类型博客请求，跳转到主页处理
                    this.setCookie("typeid",typeid,"/login/index;",1)
                    window.location.href="/login/index"
                },
                add2Blog(){
                    window.location.href="/api/blog/go2AddBlog"
                },
                findAllBlogs(){
                    axios.get("/api/blog/findAll")
                        .then(resp=>{
                            this.myblogs=resp.data.data
                            console.log(this.myblogs)
                        })
                },
                updPwd(){
                    axios.post("/user/updPwd",this.user)
                        .then(resp=>{
                            if (resp.data.data)
                            {
                                this.$message({
                                    showClose: true,
                                    offset: 100,
                                    duration:1500,
                                    message: resp.data.msg,
                                    type: 'warning'
                                });
                            }else
                            {
                                this.$message({
                                    showClose: true,
                                    offset: 100,
                                    message:resp.data.msg,
                                    type: 'error'
                                });
                            }
                        })
                    this.dialogFormVisible=false;
                },
                updName(){
                    axios.post("/user/updName",this.user)
                        .then(resp=>{
                            if (resp.data.data)
                            {
                                this.$message({
                                    showClose: true,
                                    offset: 100,
                                    duration:1500,
                                    message: resp.data.msg,
                                    type: 'warning'
                                });
                            }else
                            {
                                this.$message({
                                    showClose: true,
                                    offset: 100,
                                    message:resp.data.msg,
                                    type: 'error'
                                });
                            }
                        })
                    this.dialogFormVisible2=false;
                },
                getMyDis(page){
                    axios.post("/api/dis/findByUserDis/"+page+"/"+this.num).then((resp)=>{
                        this.mydis=resp.data.data.list
                        this.total = resp.data.data.total
                            if (JSON.stringify(this.mydis) == '{}' || this.mydis === undefined)
                            {
                                return
                            }
                            else
                            {
                                for (let mydisObj of this.mydis) {
                                    for (let mydisObjKey in mydisObj) {
                                        if (mydisObjKey=="blogId")
                                        {
                                            console.log(mydisObj[mydisObjKey])
                                            axios.get("/api/blog/findBlogById/"+mydisObj[mydisObjKey]).then(resp=>{
                                                Vue.set(mydisObj,"blog",resp.data.data);
                                            })
                                        }
                                    }
                                }
                            }

                        console.log(this.mydis)
                    })

                },
                updBlog(id){
                    this.setCookie("blogid",id,"/api/blog/go2AddBlog",1)
                    window.location.href="/api/blog/go2AddBlog"
                },
                delBlog(blog){
                    axios.post("/api/blog/delBlog",blog)
                    .then(resp=>{
                        console.log(resp.data.data)
                    })
                    console.log(blog)
                },
                handleCommand(command) {

                    if(command=="logOut")
                    {
                        window.location.href="/logOut"
                    }else if (command=="go2UserInfo")
                    {
                        alert("ok")
                    }else if(command=="add2Blog")
                    {
                        this.add2Blog()
                    }else if(command=="findAllBLog")
                    {
                        this.activetabs="blog"
                    }
                },
                delDis(id){
                    axios.get("/api/dis/delDis/"+id)
                    .then(resp=>{
                        console.log(resp.data.data)
                    })
                }
            },
            mounted(){

                this.findAllBlogs()
                axios.get("/public/type/findAll")
                    .then(resp=>{
                        this.types=resp.data.data;
                    })

                this.getMyDis(1);

            }
        })
    </script>
</html>